<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>

<script lang="ts">
  import { defineComponent, PropType, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import dayjs from 'dayjs';
  import 'echarts-liquidfill';

  const COLOR_BLUE = '#212A7C';
  export default defineComponent({
    name: 'TimeProgress',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '200px',
      },
      currentMonth: {
        type: Number,
        required: true,
      },
      lastMonth: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const getOption = () => {
        const month = dayjs(`${props.lastMonth}01`, 'YYYYMMDD').month() + 1;
        const value = (month / 12).toFixed(2);

        return {
          series: [
            {
              type: 'liquidFill',
              grid: {
                left: '60%', // 左侧留出15%空间
                right: '5%', // 右侧只保留1%空间
                bottom: '3%',
                top: '0%',
              },
              data: [value],
              radius: '95%',
              center: ['70%', '50%'],
              waveAnimation: true,
              color: [COLOR_BLUE, COLOR_BLUE, '#1598ED'],
              outline: {
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 1,
                  borderColor: COLOR_BLUE,
                },
              },
              backgroundStyle: {
                color: '#FFFFFF',
              },
              label: {
                show: true,
                position: 'inside',
                rich: {
                  a: {
                    fontSize: 48,
                    fontWeight: 800,
                    lineHeight: 80,
                  },
                  b: {
                    fontSize: 12,
                  },
                  c: {
                    fontSize: 14,
                  },
                },
                formatter: (params) => {
                  return `{a|${(params.value * 100).toFixed(0)}}{b|%}\n{c|时间进度}`;
                },
              },
            },
          ],
        };
      };

      watchEffect(() => {
        setOptions(getOption());
      });

      return { chartRef };
    },
  });
</script>

<style lang="less" scoped>
  .echarts {
    width: 100% !important;
    height: 100% !important;
  }
</style>
